<template>
	<page class="" ref='page'>
		
		
		<view class="tab_rows" v-if="listData && listData.length > 0" >
			<view class="meige"  v-for="(items,indexs) in listData" :key="indexs" :class="choseInd == indexs ? 'active' : 'noactive'" v-if="items.residentialquarters_status == 0" >
				<view class="texts" @click="gotoDdiehuan(items,indexs)" >
					{{items.name}}
					<!-- <vgt-tab style="z-index: 9;" :list="vgtTab" @onValueChange="vgtChange"></vgt-tab> -->
				</view>
				<view class="textss" v-if="choseInd == indexs">
					<um-dropdown @change="fnChange" rangeKey="name" :optionList="items.erjitab" selectedItemStyle="color:2973F8;"></um-dropdown>
				</view>
				
			</view>
		</view>
		<view class="dangqianxiaoqu" v-if="house_status==0" @click="tiaozhuanxiaoqu()">
			<view class="" >
				当前小区：{{rqxiaoqu}}
			</view>
			<view class="" >
				去切换
				<n-icon name="right" size="32" color="fff"></n-icon>
			</view>
		</view>
		<view class="standard_list">
			<!-- 物业费缴纳情况 -->
			<view class="standard" v-if='recommendList && recommendList.length > 0 && choseInd == 0'>
				<view class="standard_box23 wuyefeijiaona">
					<view class="title">
						单元房号
					</view>
					<view class="text">
						缴纳金额
					</view>
					<view class="text">
						缴纳状态
					</view>
				</view>
				<view class="standard_box23 " v-for="(item,index) in recommendList" :key="index" @click="gotoDetail(item.id)">
					<view class="left wuyefeijiaona">
						<view class="title">
							{{item.title}}
						</view>
						<view class="text">
							{{item.label}}
						</view>
						<view class="text" :class="item.fitment_nav_pid == 3 ? 'yanse2' : 'yanse1'">
							{{item.fitment_nav_pid == 3 ? '已缴纳' : '未缴纳'}}
						</view>
						<!-- <view class="look yanjin">
							<image class="bgc_imgs" src="/static/image/icon/showyan.png" mode="scaleToFill" ></image>
							<view class="text">{{item.look_num}}</view>
						</view> -->
					</view>
					<!-- <view class="right">
						<image :src="item.img" mode="scaleToFill"></image>
					</view> -->
				</view>
			</view>
			<!-- 物业费使用情况 -->
			<view class="standard" v-if='recommendList && recommendList.length > 0 && choseInd == 1'>
				<view class="standard_box" v-for="(item,index) in recommendList" :key="index" @click="gotoDetail(item.id)">
					<view class="left">
						<view class="title">
							{{item.title}}
						</view>
						<view class="text">
							{{item.label}}
						</view>
						<view class="look yanjin">
							<!-- <image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/ZbR1Yj4NNP4VKOdAB2eGJavDG0rck7UOqKroJemp.png"></image> -->
							<image class="bgc_imgs" src="/static/image/icon/showyan.png" mode="scaleToFill" ></image>
							{{item.look_num}}
						</view>
					</view>
					<view class="right">
						<image :src="item.img" mode="scaleToFill"></image>
					</view>
				</view>
			</view>	
			<empty  :status='2' v-if='recommendList.length == 0'/>
		</view>
		<foot></foot>
		<tabbar ref='tabbar' active='2'/>
		</view>
	</page>
</template>

<script>
	// import tabbar from '@/components/tabbar.vue'
	import {getFitment,getFitmentNav} from '../static/api.js'
	import tabRow from '@/components/tab-row.vue'
	import foot from '@/components/foot.vue'
	import vgtTab from '@/components/vgt-tab/vgt-tab.vue'
	export default {
		components: {
			vgtTab,
			foot,
			// tabbar
		},
		data() {
			return {
				rqxiaoqu:'',//当前小区
				choseInd: 0, // 当前选中
				optionVal: '', // 选中列表的值
                listData: [ // 列表数据
                    
                ],
				vgtTab:[],
				more: false,
				page:1,
				limit:50,
				recommendList: [],
				nav_id:1,
				nav_pid:0,
				house_status:0,
			}
		},
		
		methods: {
			// 大按钮选中触发
			gotoDdiehuan(imea,index) {
				this.choseInd = index;
				this.nav_id = imea.id;
				this.nav_pid = 0;
				this.page = 1
				this.getFitment();
			},
			// 列表选中时触发事件，带出选中的值
            fnChange(e) {
				console.log(e,'小列表选中')
                this.optionVal = e
				this.nav_pid = e.id;
				this.page = 1
				this.getFitment();
            },
			// 列表
			getFitment(){
				getFitment({nav_id:this.nav_id,nav_pid:this.nav_pid,page:this.page,limit:this.limit}).then(res=>{
					let arr = res && res.list.map((item,index)=>{
						return {
							id: item.id,
							title:item.title,
							label:item.title_aux,
							img:item.picture,
							fitment_nav_id:item.fitment_nav_id,
							fitment_nav_pid:item.fitment_nav_pid,
							look_num:item.look_num
						} 
					})
					if(this.page > 1){
						this.recommendList = this.recommendList.concat(arr);
					}else{
						this.recommendList = arr;
					}
					uni.hideLoading();
					if(res.list && res.list.length < 10){
						this.more = true;
					}
				})
			},
			// 跳转到档案详情切换默认
			tiaozhuanxiaoqu(id){
				uni.navigateTo({
					url: `/pagesMy/housingArchives/index?type=choice`
				});
			},
			// 跳转详情
			gotoDetail(id){
				uni.navigateTo({
					url: `/pagesHome/decoratePower/decorateDetail?id=${id}`
				});
			},
			//旧的切换分类
			vgtChange(e){
				this.nav_id = e.currentInd;
				this.page = 1
				this.getFitment();
			},
			//查询全部分类
			getFitmentNav(){
				getFitmentNav().then(res=>{
					
					let arr = [{name:'全部',id:''}]
					let arrs = arr.concat(res.list[0].erjitab)
					let arrs2 = arr.concat(res.list[1].erjitab)
					// this.vgtTab = res;
					res.list[0].erjitab = arrs;
					res.list[1].erjitab = arrs2;
					this.listData = res.list;
			})
			}
		},
		onShow(){
			var option = this.$global.$editUploadBack(4, 'decoratePowerLook')
			if(option && option.id && this.recommendList.findIndex(x=>x.id == option.id) != -1){
				this.recommendList[this.recommendList.findIndex(x=>x.id == option.id)].look_num  = Number(this.recommendList[this.recommendList.findIndex(x=>x.id == option.id)].look_num) + 1
			}
		},
		onLoad(parms) {
			// console.log(this.$store.state.userInfo,'获取登录用户信息')
			if(this.$store.state.userInfo){
				this.rqxiaoqu = this.$store.state.userInfo.residentialquarters_name;
			}
			if(this.$store.getters.userInfo.house_record == 0){
				uni.showToast({
					title:'业主认证后可查看小区物业费情况',
					icon:'error',
					duration:2000
				})
				this.house_status = 1;
			}else{
				this.nav_id = 1;
				this.getFitment();
				this.getFitmentNav();
			}
			
			
		},
		onReachBottom() {
			if(!this.more){
				uni.showLoading({
					title: '加载中...'
				});
				this.page++;
				this.getFitment();
			}
		}

	}
</script>
<style scoped>
@import url("./decoratePower.css");
</style>
